<template>
  <div :class="['viewer_pic-box', { 'video-full': isFullScreen }]">
    <div class="viewer_pic-img">
      <div v-if="props.isVideo && !isChangeVideo">
        <Video
          ref="videoEle"
          :url="props.url"
          width="1000px"
          height="562px"
          @onFullScreenChange="onFullScreenChange"
        ></Video>
      </div>
      <img
        v-else-if="!props.isVideo"
        :style="{ transform: `rotate(${props.rotate}deg) scale(${props.scale})` }"
        :src="props.url"
        class="viewer_img"
      />
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref, defineExpose, watch } from 'vue';
import Video from '@/components/video/video.vue';

const props = defineProps({
  scale: Number,
  rotate: Number,
  url: String,
  isVideo: {
    type: Boolean,
    default: false
  }
});

// 视频切换时重新加载视频组件
const isChangeVideo = ref(false);
watch(
  () => props.url,
  val => {
    if (props.isVideo) {
      isChangeVideo.value = true;
      setTimeout(() => {
        isChangeVideo.value = false;
      }, 0);
    }
  }
);

// 关闭预览时暂停视频播放
const videoEle = ref(null);
function videoPause() {
  videoEle?.value?.videoPause();
}
defineExpose({
  videoPause
});

// 监听视频全屏事件
const isFullScreen = ref(false);
function onFullScreenChange(isFull) {
  isFullScreen.value = isFull;
}
</script>
<style lang="less" scoped>
@keyframes modal-image-show {
  0% {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
.viewer_pic-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: 0.2s cubic-bezier(0.82, 0, 1, 0.9) modal-image-show;
  &.video-full {
    position: relative;
    z-index: 10;
  }
  .viewer_pic-img {
    .viewer_img {
      display: block;
      max-width: ~'min(90vw, 1000px)';
      max-height: ~'min(90vh, 562px)';
      transform: rotate(0);
      object-fit: contain;
      transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
    }
  }
}
</style>
